<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // const map = new AMap.Map('map-container', {
      //   zoom: 5, // 层级，5表示国家级别
      //   center: [100, 15], // 泰国的经纬度
      // });

      // // 在地图上标记特定的坐标
      // const marker = new AMap.Marker({
      //   position: [100, 15], // 要标注的经纬度
      //   map: map,
      //   title: 'Your Location',
      // });

      // 新加坡的GPS坐标（WGS-84）
      const gpsCoordinates = [1.3521, 103.8198];
      const apiKey = "96d4e37fa142952fcd20c7f1720875c2"; 	

      // 发起坐标转换请求
      fetch(
        `https://restapi.amap.com/v3/assistant/coordinate/convert?locations=${gpsCoordinates[1]},${gpsCoordinates[0]}&coordsys=gps&output=json&key=${apiKey}`
      )
        .then((response) => response.json())
        .then((data) => {
          if (data.status === "1" && data.info === "ok") {
            // 高德坐标（GCJ-02）
            const amapCoordinates = data.locations.split(",");

            // 初始化地图
            const map = new AMap.Map("map-container", {
              zoom: 5,
              center: amapCoordinates,
            });

            // 创建标记
            const gpsMarker = new AMap.Marker({
              position: gpsCoordinates,
              map: map,
              title: "GPS Coordinates (WGS-84)",
            });

            // 创建标记
            const amapMarker = new AMap.Marker({
              position: amapCoordinates,
              map: map,
              title: "Converted AMap Coordinates (GCJ-02)",
            });
          } else {
            console.error("坐标转换失败", data);
          }
        })
        .catch((error) => {
          console.error("发生错误", error);
        });
    },
  },
};
</script>

<style>
#map-container {
  height: 950px;
}
</style>
